<!--
 * @Author: Little_WeakDuck
 * @Date: 2023-02-23 17:58:36
 * @LastEditors: Little_WeakDuck
 * @LastEditTime: 2023-09-05 17:05:44
 * @FilePath: /index.html
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- 网页标题 -->
  <title>小弱鸭的联系方式</title>
  <!-- 用来展示网站icon -->
  <!-- <link rel="shortcut icon" href="https://q1.qlogo.cn/g?b=qq&nk=qq号&s=100" type="image/x-icon" />  -->
  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/index.css" />
  <!-- 轮播图，我觉得没用去掉了 -->
  <!-- <link rel="stylesheet" href="css/swiper-bundle.min.css" /> -->
  <script src="./js/iconfont.js"></script>
  <link href="./css/sweetalert.css" rel="stylesheet">
</head>

<body>
  <div id="app">
    <!-- 一言位置 -->
    <p id="aword">&nbsp;</p>
    <div class="ctn">
      <div id="header">
        <div class="bg con">
          <div class="user">
            <!-- QQ头像 -->
            <img src="https://q1.qlogo.cn/g?b=qq&nk=2632511801&s=100" alt="头像" />
            <!-- 想要展示的内容，不写也可以 -->
            <span class="infor">
              <p>铛铛</p>
              <p>当疯狂与优雅成为羁绊之时，便是灵魂自由的开始...</p>
            </span>
          </div>
        </div>
        <!-- <div class="banner"> -->
        <!-- <div class="swiper"> -->
        <!-- <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./image/1.jpg"></div>
        <div class="swiper-slide"><img src="./image/2.jpg"></div>
        <div class="swiper-slide"><img src="./image/3.jpg"></div>
      </div> -->
        <!-- </div> -->
        <!--分页器。如果放置在swiper外面，需要自定义样式。-->
        <!-- <div class="swiper-pagination"></div> -->

        <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
        <!-- <div class="swiper-button-prev"></div> -->

        <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
        <!-- <div class="swiper-button-next"></div> -->
        <!-- </div> -->
      </div>
      <div id="theme" class="con">
        <div class="box">
          <!-- 填写需要复制的内容、具体看下面 -->
          <div @click="copy('2632511801','已成功复制微信号到剪贴板','微信')">
            <!-- 网站名称 -->
            <div class="icu">
              <!-- 图标 -->
              <img src="./image/wechat.png" />
              <h3>微信</h3>
            </div>
            <span class="text">
              <!-- 我用的iconfont的图标 大小20 -->
              <svg t="1693807254494" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="1506" width="20" height="20">
                <path
                  d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z"
                  fill="#5D5D5D" p-id="1507"></path>
              </svg>
              <!-- 网站描述 -->
              <p>微信号</p>
            </span>
          </div>
          <div @click="copy('2632511801','已成功复制QQ号到剪贴板','QQ')">
            <div class="icu">
              <img src="./image/qq.png" />
              <h3>QQ</h3>
            </div>
            <span class="text">
              <svg t="1693807899350" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2538" width="20" height="20">
                <path
                  d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"
                  p-id="2539"></path>
              </svg>
              <p>QQ号</p>
            </span>
          </div>
          <!-- 电话 -->
          <div @click="callMe('+8615623607086')">
            <div class="icu">
              <img src="./image/phone.png" />
              <h3>电话</h3>
            </div>
            <span class="text">
              <svg t="1693824208929" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5805" width="20" height="20">
                <path
                  d="M871.673333 770.813333a53.393333 53.393333 0 0 1 0 75.42l-37.713333 37.713334c-27.866667 27.866667-64.52 44.84-108.946667 50.46a264.333333 264.333333 0 0 1-33.213333 2.04c-32.333333 0-67.22-5.46-104.146667-16.32C487.42 890.666667 382 824.226667 290.9 733.1S133.333333 536.586667 103.873333 436.346667c-14.666667-49.94-19.493333-96.153333-14.28-137.333334 5.62-44.426667 22.593333-81.08 50.46-108.946666l37.713334-37.713334a53.393333 53.393333 0 0 1 75.42 0l165.94 165.933334a53.4 53.4 0 0 1 0 75.426666l-37.713334 37.686667c-21.333333 21.333333-0.1 90.413333 60.34 150.846667s129.486667 81.7 150.846667 60.34l37.713333-37.713334a53.4 53.4 0 0 1 75.426667 0zM597.333333 384a42.713333 42.713333 0 0 1 42.666667 42.666667 21.333333 21.333333 0 0 0 42.666667 0 85.426667 85.426667 0 0 0-85.333334-85.333334 21.333333 21.333333 0 0 0 0 42.666667z m314.5-90.2A341.073333 341.073333 0 0 0 597.333333 85.333333a21.333333 21.333333 0 0 0 0 42.666667c164.666667 0 298.666667 134 298.666667 298.666667a21.333333 21.333333 0 0 0 42.666667 0 339.153333 339.153333 0 0 0-26.833334-132.866667zM597.333333 256c94.106667 0 170.666667 76.56 170.666667 170.666667a21.333333 21.333333 0 0 0 42.666667 0 213.333333 213.333333 0 0 0-213.333334-213.333334 21.333333 21.333333 0 0 0 0 42.666667z"
                  fill="#5C5C66" p-id="5806"></path>
              </svg>
              <p>给我打电话</p>
            </span>
          </div>
          <!-- 邮件 -->
          <div @click="sendMail('little_weakduck@icloud.com')">
            <div class="icu">
              <img src="./image/mail.png" />
              <h3>邮件</h3>
            </div>
            <span class="text">
              <svg t="1693808916287" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="4424" width="20" height="20">
                <path d="M513 583.8l448.5-448.5c-11.6-4.7-24.3-7.3-37.5-7.3H100c-12.7 0-24.9 2.4-36.1 6.7L513 583.8z"
                  p-id="4425">
                </path>
                <path
                  d="M513 674.3L14.6 175.9C5.3 191.1 0 208.9 0 228v568c0 55.2 44.8 100 100 100h824c55.2 0 100-44.8 100-100V228c0-18.5-5.1-35.9-13.9-50.8L513 674.3z"
                  p-id="4426"></path>
              </svg>
              <p>发邮件通知我</p>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="./js/vue.min.js"></script>
  <script src="./js/sweetalert.js"></script>
  <script>
    new Vue(
      {
        el: "#app",
        created() {
          //  一言
          fetch("https://v1.hitokoto.cn/")
            .then((res) => res.json())
            .then((res) => {
              document.querySelector("#aword").innerHTML = res.hitokoto + `-- ${res.from}`;
            });
        },
        methods: {
          /**
           * @description: alert提示
           * @param {*} title title标题 默认为注意
           * @param {*} message message内容 默认为空
           * @param {*} icon icon图标 默认为info
           * @return {*}
           */
          alert(title = '注意', message = '', icon = 'info') {
            Swal.fire(
              {
                icon: icon,
                title: title,
                text: message,
                confirmButtonText: '确定',
              }
            )
          },
          /**
           * @description: 打开网页
           * @param {*} url 链接
           * @return {*}
           */
          gotoPurpose(url) {
            window.open(url);
          },
          /**
           * @description: 复制内容
           * @param {*} content 要复制到剪贴板的内容
           * @param {*} message 成功提示
           * @param {*} type 复制的内容类型
           * @return {*}
           */
          async copy(content, message, type) {
            let flag = false;
            this.alert()
            try {
              try {
                await navigator.clipboard.writeText(content);
                this.alert()
                flag = true;
              } catch (err) {
                console.error("无法复制. 使用降级方案.", err);
                try {
                  await this.fallbackCopyTextToClipboard(content);
                  flag = true;
                } catch (err) {
                  console.error("降级方案：无法复制", err);
                }
              }
            } catch (err) {
              console.error('Permissions API error:', err);
              try {
                await this.fallbackCopyTextToClipboard(content);
                flag = true;
              } catch (err) {
                console.error("降级方案：无法复制", err);
              }
            }
            if (flag) {
              this.alert('复制成功', message, 'success')
            } else {
              this.alert(type, content, 'info')
            }
          },
          /**
           * @description: 打开发送邮件的窗口，失败则复制到剪贴板
           * @param {*} mail 邮箱地址
           * @return {*}
           */
          sendMail(mail) {
            let newWindow = window.open(`mailto:${mail}`);
            if (!newWindow || typeof newWindow.closed == "undefined" || newWindow.closed) {
              // 如果无法打开新窗口（可能是因为浏览器阻止了弹出窗口，或者用户没有设置默认邮件客户端），则复制链接到剪贴板
              this.copy(mail, "已成功复制邮箱到剪贴板", "邮箱");
            }
          },
          /**
           * @description: 打开拨号界面，失败则复制到剪贴板
           * @param {*} phone 电话号码
           * @return {*}
           */
          callMe(phone) {
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|HarmonyOS/i.test(navigator.userAgent)) {
              window.location.href = `tel:${phone}`;
            } else {
              this.copy(phone, "已成功复制电话号码到剪贴板", "电话");
            }
          },
          /**
           * @description: 复制兼容性处理
           * @param {*} text 要复制到剪贴板的内容
           * @return {*}
           */
          fallbackCopyTextToClipboard(text) {
            return new Promise((resolve, reject) => {
              var textArea = document.createElement("textarea");
              textArea.value = text;

              // 隐藏textArea
              textArea.style.position = 'fixed';
              textArea.style.top = 0;
              textArea.style.left = 0;
              textArea.style.width = '2em';
              textArea.style.height = '2em';

              document.body.appendChild(textArea);

              textArea.focus();
              textArea.select();

              try {
                var successful = document.execCommand('copy');
                var msg = successful ? 'successful' : 'unsuccessful';
                console.log('Fallback: Copying was ' + msg);
                resolve()
              } catch (err) {
                console.error('Fallback: Oops, unable to copy', err);
                reject(err)
              }

              document.body.removeChild(textArea);
            })
          }

        },
      });
  </script>
</body>

</html>